<template>
  <div class="chat-container">
    <h2>聊天室</h2>

    <div class="connection-status">
      连接状态:
      <span :class="connectionStatus">{{ connectionStatusText }}</span>
    </div>

    <div class="controls">
      <button @click="connect" :disabled="isConnectingOrConnected">连接</button>
      <button @click="disconnect" :disabled="!isConnected">断开</button>
    </div>

    <div class="message-area">
      <div class="messages">
        <div
            v-for="(msg, index) in allMessages"
            :key="index"
            class="message"
            :class="{
            'self-message': msg.isSelf,
            'other-message': !msg.isSelf
          }"
        >
          <div class="message-header">
            <span class="sender">{{ msg.sender }}</span>
            <span class="time">{{ msg.time }}</span>
            <span v-if="msg.isSelf" class="status">{{ msg.status }}</span>
          </div>
          <div class="content">{{ msg.content }}</div>
        </div>
      </div>

      <div class="send-area">
        <input
            v-model="messageInput"
            placeholder="输入消息..."
            @keyup.enter="sendMessage"
            :disabled="!isConnected"
        >
        <button
            @click="sendMessage"
            :disabled="!isConnected || !messageInput"
        >
          发送
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { chatSimpleStore } from '@/stores/chatSimpleStore.js'

const chatStore = chatSimpleStore()
const messageInput = ref('')

// 计算属性
const connectionStatus = computed(() => chatStore.connectionStatus)
const connectionStatusText = computed(() => {
  switch(connectionStatus.value) {
    case 'connected': return '已连接'
    case 'disconnected': return '已断开'
    case 'connecting': return '连接中'
    case 'error': return '连接错误'
    default: return connectionStatus.value
  }
})
const isConnected = computed(() => connectionStatus.value === 'connected')
const isConnectingOrConnected = computed(() =>
    ['connecting', 'connected'].includes(connectionStatus.value)
)
const allMessages = computed(() => chatStore.receivedMessages)

// 方法
const connect = () => {
  chatStore.connect()
}

const disconnect = () => {
  chatStore.disconnect()
}

const sendMessage = () => {
  if (messageInput.value.trim()) {
    chatStore.send(messageInput.value)
    messageInput.value = ''
  }
}
</script>

<style scoped>
.chat-container {
  width: 500px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-family: Arial, sans-serif;
}

.connection-status {
  margin: 10px 0;
  padding: 8px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.connection-status span {
  font-weight: bold;
}

.connection-status .connected {
  color: green;
}

.connection-status .disconnected {
  color: red;
}

.connection-status .connecting {
  color: orange;
}

.connection-status .error {
  color: darkred;
}

.controls {
  margin: 15px 0;
}

.controls button {
  margin-right: 10px;
  padding: 8px 16px;
  cursor: pointer;
}

.message-area {
  margin-top: 20px;
}

.messages {
  height: 300px;
  overflow-y: auto;
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #f9f9f9;
}

.message {
  margin-bottom: 12px;
  padding: 8px;
  border-radius: 4px;
}

.message-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 0.9em;
}

.sender {
  font-weight: bold;
}

.time {
  color: #666;
  font-size: 0.8em;
}

.status {
  color: #666;
  font-size: 0.8em;
  font-style: italic;
}

.content {
  word-wrap: break-word;
}

.self-message {
  background-color: #e3f2fd;
  border-left: 3px solid #2196f3;
  margin-left: 20%;
}

.other-message {
  background-color: #f1f1f1;
  border-left: 3px solid #9e9e9e;
  margin-right: 20%;
}

.send-area {
  display: flex;
  gap: 10px;
}

.send-area input {
  flex-grow: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.send-area button {
  padding: 8px 16px;
  cursor: pointer;
}
</style>